<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<style type="text/css">
			p {
				margin: 0px;
			}

			/* 测试阅览室 */
			.subscribe {
				height: 110px;
				background-color: white;
			}

			#ReadingRoom {
				height: 40px;
				line-height: 40px;
				padding-left: 15px;
				color: #000000;
				font-size: 1.375rem;
				x
			}

			.mui-table-view:before,
			.mui-table-view-cell:after,
			.mui-table-view:after {
				height: 0;
			}

			.mui-table-view-cell>a:not(.mui-btn) {
				position: unset;
				padding: unset;
				font-size: 0.875rem;
			}

			.subscribe_bottom {
				height: 62px;
				display: flex;
				margin: 7px 15px 0px 15px;
				padding-left: 15px;
				flex-direction: column;
				background-color: #f3f3f3;
				border-radius: 3px;
			}

			.subscribe_bottom .make {
				height: 50px;
				line-height: 30px;
				color: #000000;
				padding-left: 10px;
			}

			/* 进入座位 */
			.submit {
				width: 100%;
				padding: 10px 0px;
				background-color: white;
			}

			.submit_go {
				width: 70%;
				margin: auto;
				display: flex;
			}

			.submit button {
				flex: 1;
				color: white;
				background-color: #25c830;
			}

			.submit_casual {
				width: 60px;
			}

			.submit p {
				width: 50px;
				height: 25px;
				line-height: 25px;
				text-align: center;
				margin-left: 10px;
				border-radius: 10px;
				background-color: #24f932;
				font-size: 12px;
				color: white;
			}

			/* 分割线 */
			.scribing {
				width: 100%;
				height: 1px;
				background-color: #d0d0d0;
			}

			/* 列表 */
			.mui-table-view-cell {
				display: flex;
			}

			.mui-table-view .circle {
				display: block;
				width: 16px;
				height: 16px;
				margin-top: 2px;
				border: 3px solid #ffba19;
				border-radius: 50%;
			}

			.mui-table-view .text {
				flex: 1;
				font-size: 14px;
				padding-left: 15px;
				color: #636363;
			}

			.mui-badge {
				color: black;
				background-color: transparent;
			}
		</style>
	</head>

	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			// mui.ajax('http://116.63.89.27:83/gxzy.asmx/GetJ_RoomStatus', {
			// 	data: {
			// 		"SchoolNo": "20191030",
			// 		"roomNo": 201001
			// 	},
			// 	dataType: 'json', //服务器返回json格式数据
			// 	type: 'post', //HTTP请求类型
			// 	timeout: 10000, //超时时间设置为10秒；
			// 	headers: {
			// 		'Content-Type': 'application/json'
			// 	},
			// 	success: function(data) {
			// 		let res = data.d.Result;
			// 		console.log(res);
			// 		var item = mui('.item');
			// 		item[0].innerHTML = res.RoomName;
			// 		item[0].innerHTML = res.RoomName;
			// 		item[1].innerHTML = res.OpenCloseState == "Open" ? '开馆' : '闭馆';
			// 		item[2].innerHTML = res.SeatAmount_All;
			// 		item[3].innerHTML = res.SeatAmount_Used;
			// 		item[4].innerHTML = res.SeatAmount_Last;
			// 		item[5].innerHTML = res.Percent + '%';
			// 	},
			// });
			mui.plusReady(function() {
				var self = plus.webview.currentWebview(); //获取当前窗体对象
				var RoomNo = self.RoomNo; //接收参数
				//console.log(RoomNo);
				mui.ajax('http://116.63.89.27:83/gxzy.asmx/GetJ_RoomStatus', {
					data: {
						"SchoolNo": "20191030",
						"roomNo": RoomNo
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'Content-Type': 'application/json'
					},
					success: function(data) {
						let res = data.d.Result;
						// console.log(res);
						var item = mui('.item');
						mui('#ReadingRoom')[0].innerHTML = res.RoomName;
						item[0].innerHTML = res.RoomName;
						item[1].innerHTML = res.OpenCloseState == "Open" ? '开馆' : '闭馆';
						item[2].innerHTML = res.SeatAmount_All;
						item[3].innerHTML = res.SeatAmount_Used;
						item[4].innerHTML = res.SeatAmount_Last;
						item[5].innerHTML = res.Percent + '%';
					},
				});
			})
		</script>
		<div id="">
			<!-- 阅览室 -->
			<div class="subscribe">
				<div class="subscribe_top">
					<p id="ReadingRoom"></p>
				</div>
				<ul class="mui-table-view mui-table-view-radio subscribe_bottom">
					<li class="mui-table-view-cell mui-selected">
						<a class="mui-navigate-right make">今日预约</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right make">明日预约</a>
					</li>
				</ul>
			</div>

			<!-- 进入座位 -->
			<div class="submit">
				<div class="submit_go">
					<button>进入座位</button>
					<div class="submit_casual">
						<p>随便坐</p>
					</div>
				</div>
			</div>
			<!-- 分割线 -->
			<div class="scribing"></div>
			<!-- 列表 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<span class="circle"></span>
					<span class="text">阅览室</span>
					<span class="mui-badge mui-badge-primary item"></span>
				</li>

				<li class="mui-table-view-cell">
					<span class="circle"></span>
					<span class="text">阅览室开馆状态</span>
					<span class="mui-badge mui-badge-success item"></span>
				</li>
				<li class="mui-table-view-cell">
					<span class="circle"></span>
					<span class="text">座位总数</span>
					<span class="mui-badge item"></span>
				</li>
				<li class="mui-table-view-cell">
					<span class="circle"></span>
					<span class="text">已经使用</span>
					<span class="mui-badge item"></span>
				</li>
				<li class="mui-table-view-cell">
					<span class="circle"></span>
					<span class="text">可用座位</span>
					<span class="mui-badge item"></span>
				</li>
				<li class="mui-table-view-cell">
					<span class="circle"></span>
					<span class="text">上座率</span>
					<span class="mui-badge item"></span>
				</li>
			</ul>
		</div>
	</body>

</html>
